
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <style>
        table{
            border: 1px solid black;
            width: 80%;
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid black;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        th{
            background-color: darkorange;
            color: #ffffff;
            font-weight: bold;
            letter-spacing: 3px;
        }
        td > img{
            width: 100px;
            height: 120px;
        }
    </style>
</head>
<body>
<table align="center">
    <thead>
    <tr>
        <th>序号</th>
        <th>菜品名称</th>
        <th>菜品单价</th>
        <th>菜品照片</th>
        <th>购买数量</th>
        <th>合计</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${requestScope.carInfoList}" var="carInfo" varStatus="status">
        <tr>
            <td>${status.index+1}</td>
            <td>${carInfo.eat_name}</td>
            <td>
                <fmt:formatNumber pattern="¥###.##" value="${carInfo.eat_price}"/>

            </td>
            <td>
                <img src="../images/eat/${carInfo.eat_image}"/></td>
            <td>
                <button type="button" onclick="updateCount('-',${carInfo.car_id})">-</button>
                <input onblur="updateCount('',${carInfo.car_id})" id="${carInfo.car_id}"  type="text" name="count" value="${carInfo.car_count}" size="1"/>

                <button type="button" onclick="updateCount('+',${carInfo.car_id})" >+</button>

            </td>

            <td>
                <fmt:formatNumber pattern="¥###.##" value="${carInfo.car_count*carInfo.eat_price}"/>
                <c:set var="sum" value="${requestScope.sum+carInfo.car_count*carInfo.eat_price}" scope="request"/>
            </td>
            <td>
                <a href="car.do?operate=delCar&car_id=${carInfo.car_id}">删除</a>
            </td>

        </tr>
    </c:forEach>
    <tr>
        <td colspan="7">
            <a href="../index.jsp">返回首页</a>
            <span style="margin:0px 20px">总价:<label style="..."><fmt:formatNumber pattern="¥###.##" value="${requestScope.sum}"/> </label></span>
            <a href="${pageContext.request.contextPath}/showTable">下单</a>
        </td>
    </tr>

    <script>

        <%--function find() {--%>
        <%--    location.href="${pageContext.request.contextPath}/showTable"--%>
        <%--}--%>
        function updateCount(fuhao,id){
            //获得输入框中菜品的数量
            let count = parseInt(document.getElementById(id).value);

            if(fuhao=="+"){
                count = count + 1;
            }else if(fuhao == "-"){

                count = count - 1;
            }
            if(count<1){
                alert("购买数量不能小于1");
                return;
            }
            //将获得的最新数量提交给服务端
            location.href="car.do?operate=updateCarCount&car_id="+id+"&count="+count;

        }
    </script>

    </tbody>
</table>
</body>
</html>
